<template>
	<div>
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog">
			<AudioPlayer v-if="state.dialog.isShowDialog" :src="state.url" :title="state.title" artist="   ~~自定义"></AudioPlayer>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="AudioPlayerDialog">
import { reactive, defineAsyncComponent } from 'vue';

const AudioPlayer = defineAsyncComponent(() => import('/@/components/player/audio/index.vue'));
const state = reactive({
	dialog: {
		title: '',
		isShowDialog: false,
	},
	url: '',
	pic: '',
	title: '',
});

const openAudioDialog = (name: string, url: string) => {
	state.dialog.title = name;
	state.dialog.isShowDialog = true;
	console.log('title： ', name);
	console.log('audio url: ', url);
	state.url = url;
	state.title = name;
};

defineExpose({
	openAudioDialog,
});
</script>
